import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';

import ManagerWithDrawContetn from './ManagerWithDrawContent';

import { WeaLocaleProvider, WeaRightMenu, WeaDialog } from 'ecCom';
import { Button } from 'antd';
import * as dialogTypes from '../../constants/OdocCompsDialogType';

const { getLabel } = WeaLocaleProvider;

/**
 * 流程撤回组件
 */
@inject('managerWithDrawStore', 'odocCompsStore')
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      height: 660,
      visible: true,
    };
  }
  render() {
    const { managerWithDrawStore, children, odocCompsStore = {} } = this.props;
    let visible = this.state.visible;
    const { coreparams = {} } = managerWithDrawStore;
    let { title } = coreparams;
    try {
      let { dialogVisible, dialogParam } = odocCompsStore;
      visible = dialogVisible.get(dialogTypes.ODOC_WITHDRAW_MANAGER_DIALOG);
      const param = dialogParam[dialogTypes.ODOC_WITHDRAW_MANAGER_DIALOG] || {};
      const { menuName } = param;
      if (menuName) title = menuName;
    } catch (e) {
    }

    const { height } = this.state;

    let dialogparams = {
      style: { width: 800, height },
      visible,
      title,
      onCancel: this.onCancel,
      buttons: this.getButtons(),
      layout: jQuery('.wf-req')[0],
    };

    return (
      <div >
        {children}
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@xhm6mp`} {...dialogparams}>
          <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@91bu7r`} datas={this.getRightMenu()}>
            <ManagerWithDrawContetn ecId={`${this && this.props && this.props.ecId || ''}_ManagerWithDrawContetn@51ybwe`} visible={visible} allstore={{ managerWithDrawStore, odocCompsStore }} otherparams={{ height }} />
          </WeaRightMenu>
        </WeaDialog>
      </div>
    );
  }

  onCancel = (res = {}) => {
    const { managerWithDrawStore, onClose } = this.props;
    const { destory } = managerWithDrawStore;
    onClose && typeof onClose == 'function' && (onClose(res));
    destory && typeof destory == 'function' && (destory());
    this.setState({ visible: false });
  }

	/**
	 * 获取右键菜单
	 * @returns {Array}
	 */
  getRightMenu() {
    let btns = [];
    const showAllBtns = this.allBtns();
    showAllBtns && showAllBtns.map((item) => {
      btns.push({ ...item });
    });
    return btns;
  }

	/**
	 * dialog获取底部按钮
	 * @returns {Array}
	 */
  getButtons = () => {
    let buttons = [];
    const showAllBtns = this.allBtns();
    showAllBtns && showAllBtns.map((item, index) => {
      buttons.push([<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vq4ko3@${index}`} {...item}>{item.content}</Button>]);
    });
    return buttons;
  }

	/**
	 * 统一管理btns
	 * @returns {{key: string, icon: *, content: *, onClick: Index.goSave, type: string}[]}
	 */
  allBtns = () => {
    const { managerWithDrawStore } = this.props;
    const { goWithDraw } = managerWithDrawStore;
    const { pluginbuttons = [] } = this.props;
    let showAllBtns = [
      {
        key: 'save',
        icon: <i className="icon-coms-Preservation" />,
        content: getLabel(32025, '撤回'),
        onClick: () => goWithDraw(this.onCancel),
        type: 'primary',
      },
      {
        key: 'close',
        icon: <i className="icon-coms-go-back" />,
        content: getLabel(201, '取消'),
        onClick: this.onCancel,
        type: 'ghost',
      },
    ];
    pluginbuttons && pluginbuttons.length >= 1 && (showAllBtns = showAllBtns.concat(pluginbuttons));
    return showAllBtns;
  }
}
export default Index;
